<!DOCTYPE html>
<html>

<head>
    <title>控件模板库</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
    <![endif]-->
    <script src="core.js?dd=132"></script>
    <script src="js/jQuery.v3.1.2-pre.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style>
        .selected {
            background-color: #08c!important;
        }
        
        .selected:hover {
            background-color: #08c!important;
        }
        
        .sde-header {
            width: 100%;
            padding: 10px;
            border-bottom: 1px solid #d3d3d3;
            top: 0;
            position: fixed;
            background: white;
        }
    </style>
</head>

<body>
    <div class="input-append sde-header">
        <input class="span6" id="txtSearch" placeholder="输入搜索关键字" type="text">
        <button class="btn" id="btnSearch" type="button">搜索</button>
    </div>
    <div class="content" style="margin-top:60px;">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>类型</th>
                    <th>id</th>
                    <th>名称</th>
                    <th>标签</th>
                    <th>描述名</th>
                </tr>
            </thead>
            <tbody id="sde-content">
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        var sourceData, currentData;
        var oNode = null,
            thePlugins = 'sdetemplate';
        $(function() {
            sourceData = UE.plugins[thePlugins].CONTROL_TEMPLATES; //异步加载
            currentData = sourceData;

            function makeHtml() {
                var html = [];
                if (!currentData || currentData == null || currentData.length <= 0) {
                    $('#sde-content').html('');
                    return;
                }
                for (var i = 0, l = currentData.length; i < l; i++) {
                    html.push('<tr index="' + i + '">');
                    html.push('<td>' + (i + 1) + '</td>');
                    html.push('<td>');
                    if (currentData[i].TYPE == 'select') {
                        html.push('下拉选项框');
                    } else if (currentData[i].TYPE == 'text') {
                        html.push('文本输入框');
                    }
                    html.push('</td>');
                    html.push('<td>' + currentData[i].ID + '</td>');
                    html.push('<td>' + currentData[i].NAME + '</td>');
                    html.push('<td>' + currentData[i].TAG + '</td>');
                    html.push('<td>' + currentData[i].DESCNAME + '</td>');
                    html.push('</tr>');
                }
                $('#sde-content').html(html.join(''));
                init();
            }

            function init() {
                $('#btnSearch').on('click', function() {
                    var arr = [],
                        key = $('#txtSearch').val();
                    if (key == '') {
                        currentData = sourceData;
                        makeHtml();
                        return;
                    }
                    for (var i = 0, l = sourceData.length; i < l; i++) {
                        if (sourceData[i].ID.indexOf(key) >= 0 || sourceData[i].NAME.indexOf(key) >= 0 || sourceData[i].TAG.indexOf(key) >= 0 || sourceData[i].DESCNAME.indexOf(key) >= 0) {
                            arr.push(sourceData[i]);
                        }
                    }
                    currentData = arr; //搜索后赋予新值
                    makeHtml();
                });
                $('#sde-content>tr').on('click', function() {
                    $(this).attr('class', 'selected');
                    $(this).siblings().attr('class', '');
                }); //.on('dblclick', function () {
                //    $(this).attr('class', 'selected');
                //    $(this).siblings().attr('class', '');
                //    //dialog.onok();
                //});
            }
            makeHtml();
        });
        dialog.oncancel = function() {
            if (UE.plugins[thePlugins].editdom) {
                delete UE.plugins[thePlugins].editdom;
            }
        };
        dialog.onok = function() {
            var index = $('#sde-content>tr.selected').attr('index') * 1;
            editor.execCommand('insertHtml', "<span> </span>" + currentData[index].HTML + "<span> </span>");
        };
    </script>
</body>

</html>